<template>


  <el-select v-model="Search_Select" placeholder="请选择" slot="prepend">
    <el-option label="公告标题" value="notice_title"></el-option>
    <el-option label="公告作者" value="notice_author"></el-option>
    <el-option label="公告类型" value="notice_type"></el-option>
  </el-select>
  <el-input placeholder="请输入关键字" icon="search" class="search" v-model="Search_Input" style="width:200px"></el-input>
  <el-button type="primary" style="width: 80px;margin-bottom: 20px;" @click="search_do">搜索</el-button>


  <el-table
    :data="showCrud"
    style="width: 100%;font-family: arial,verdana,helvetica,'PingFang SC','HanHei SC',STHeitiSC-Light,Microsoft Yahei,sans-serif;"
    class="job-table-style"
  >

    <el-table-column
      label="公告标题"
      prop="notice_title"
      width="220">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.notice_title }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="公告类型"
      prop="notice_type"
      width="80">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.notice_type }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="公告作者"
      prop="notice_author"
      width="220">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.notice_author }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="公告发布时间"
      prop="notice_release_date"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.notice_release_date }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="公告内容"
      prop="notice_content	"
      width="260">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.notice_content.slice(0, 15)+'...' }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="公告文件id集"
      prop="notice_files "
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.notice_files }}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          size="mini"
          @click="handleEditNotice(scope.$index, scope.row)">编辑
        </el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDeleteNotice(scope.$index, scope.row)">删除
        </el-button>
        <el-button
          size="mini"
          type="primary" plain @click="handleinfo(scope.$index, scope.row)">上传文件
        </el-button>
        <el-button
          size="mini"
          type="primary" plain @click="handleinfo2(scope.$index, scope.row)">上传图片
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--  公告文件上传-->
  <el-dialog title="上传文件(只上传文件列表的第一个)" v-model="notice_file_dialogVisible">
    <!--    <button @click="change" class="up_button_style">选择文件</button>-->
    <div>
      <el-upload
        class="upload-demo"
        accept=".doc,.docx"
        drag
        :auto-upload="false"
        :http-request="uploadFile"
        action="/uploadPics"
        ref="uploadPic"
        :multiple="multiple">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>
    <template #footer>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addSomePeoplePicsForm">开始上传</el-button>
      </span>
    </template>
  </el-dialog>


  <!--  公告图片上传-->
  <el-dialog title="上传图片(只上传列表的第一个)" v-model="notice_file_dialogVisible2">
    <!--    <button @click="change" class="up_button_style">选择文件</button>-->
    <div>
      <el-upload
        class="upload-demo"
        accept=".jpg,.png"
        drag
        :auto-upload="false"
        :http-request="uploadFile"
        action="/uploadPics"
        ref="uploadPic"
        :multiple="multiple">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>
    <template #footer>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addSomePeoplePicsForm2">开始上传</el-button>
      </span>
    </template>
  </el-dialog>


  <!--    表格数据过多时,采用的分页-->
  <el-pagination
    background
    @current-change="handleCurrentChange"
    :current-page.sync="currentPage"
    :page-size="Page_Size"
    layout="prev, pager, next"
    :total="Page_Total"
    style="padding-top: 20px;padding-left: 1200px;">
  </el-pagination>

  <el-button type="primary" style="float: left;width: 80px;margin-top: 10px;" @click="handleAddNotice()">添加</el-button>


  <!--  添加，弹框-->

  <el-dialog title="职位信息" v-model="addDialogFormVisible">
    <el-form :model="notice_form" ref="notice_form">
      <el-form-item label="公告标题" prop="notice_title">
        <el-input v-model="notice_form.notice_title"></el-input>
      </el-form-item>
      <el-form-item label="公告作者" prop="notice_author">
        <el-input v-model="notice_form.notice_author"></el-input>
      </el-form-item>
      <el-form-item label="公告类型" prop="notice_type">
        <el-input v-model="notice_form.notice_type"></el-input>
      </el-form-item>
      <el-form-item label="公告内容" prop="notice_content">
        <el-input v-model="notice_form.notice_content"></el-input>
      </el-form-item>
      <el-form-item label="公告发布时间" prop="notice_release_date">
        <el-date-picker
          v-model="notice_form.notice_release_date"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="公告文件id集" prop="notice_files">
        <el-input v-model="notice_form.notice_files"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="addDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addHandleNotice('notice_form',notice_form)">确定添加</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


  <!--  编辑，弹框-->

  <el-dialog title="职位信息" v-model="editDialogFormVisible">
    <el-form :model="notice_edit_form" ref="notice_edit_form" :rules="editRule">
      <el-form-item label="公告标题" prop="notice_title">
        <el-input v-model="notice_edit_form.notice_title"></el-input>
      </el-form-item>
      <el-form-item label="公告作者" prop="notice_author">
        <el-input v-model="notice_edit_form.notice_author"></el-input>
      </el-form-item>
      <el-form-item label="公告类型" prop="notice_type">
        <el-input v-model="notice_edit_form.notice_type"></el-input>
      </el-form-item>
      <el-form-item label="公告内容" prop="notice_content">
        <el-input v-model="notice_edit_form.notice_content"></el-input>
      </el-form-item>
      <el-form-item label="公告发布时间" prop="notice_release_date">
        <el-date-picker
          v-model="notice_edit_form.notice_release_date"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="公告文件id集" prop="notice_files">
        <el-input v-model="notice_edit_form.notice_files"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="cancelEdit()">取消</el-button>
        <el-button type="primary" @click="editHandleNotice('notice_edit_form',notice_edit_form)">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


</template>

<script>
import axios from 'axios'
import UpN from '@/components/UploadNoticeFile'
import {ElMessage} from "element-plus";

export default {
  name: 'noticeTable',
  components: { UpN },
  data () {
    return {
      notice_edit_form: {},
      editRule:{
        notice_title:[
          { required: true, message: "请输入公告标题",
            trigger: "blur"
          },
        ],
        notice_author:[
          { required: true, message: "请输入作者",
            trigger: "blur"
          },
        ]
      },

      crud: [],
      notice_form: {},

      //分页
      Page_Size: 7,
      currentPage: 1,
      Page_Total: 3,
      showCrud: [],

      //搜索
      Search_Input: '',
      Search_Select: '',

      editDialogFormVisible: false,
      addDialogFormVisible: false,

      //公告文件上传相关
      formPicsData: '',
      multiple: true,
      activity: {
        NoticeID: '',
      },
      notice_file_dialogVisible: false,
      notice_file_dialogVisible2:false,
    }
  },
  methods: {
    uploadFile (file) {
      this.formPicsData.append('files', file.file)
      // console.log(file.file)
      // console.log(this.formPicsData)
      // console.log(1)
    },
    addSomePeoplePicsForm(){
      //console.log('开始上传')
      let self = this
      this.formPicsData = new FormData()
      this.formPicsData.append('content', '123')
      for (let key in this.activity) {
        this.formPicsData.append(key, this.activity[key])
      }
      console.log(this.formPicsData)
      // console.log(2)
      this.$refs.uploadPic.submit()
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      let _this = this
      //this.$ajax.post这个地方需要在main.js进行简单配置
      axios.post('http://localhost:8080/uploadfileNotice', _this.formPicsData, config).then(res => {
        //TODO：具体自己逻辑部分
        console.log(res)
        _this.$message.success('上传成功!')
        _this.notice_file_dialogVisible = false
        _this.formPicsData = ''
      }).catch(res => {
        //this.$message.error("服务器走丢了!");
        _this.$message.error('上传失败!')
      })
      //this.$message.success("上传成功!");
      // this.$router.go(0)

    },
    addSomePeoplePicsForm2(){  //上传图片
      //console.log('开始上传')
      let self = this
      this.formPicsData = ''
      this.formPicsData = new FormData()
      this.formPicsData.append('content', '123')
      for (let key in this.activity) {
        this.formPicsData.append(key, this.activity[key])
      }
      console.log(this.formPicsData)
      // console.log(2)
      this.$refs.uploadPic.submit()
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      let _this = this
      //this.$ajax.post这个地方需要在main.js进行简单配置
      axios.post('http://localhost:8080/uploadImageNotice', _this.formPicsData, config).then(res => {
        //TODO：具体自己逻辑部分
        console.log(res)
        _this.$message.success('上传成功!')
        _this.notice_file_dialogVisible2 = false
        _this.formPicsData = ''
      }).catch(res => {
        //this.$message.error("服务器走丢了!");
        _this.$message.error('上传失败!')
      })
      //this.$message.success("上传成功!");
      // this.$router.go(0)

    },
    findAll () {
      let _this = this
      axios.get('http://localhost:8080/Get_Public_notice')
        .then(function (response) {
          console.log(response.data)
          _this.crud = response.data
          _this.showCrud = _this.crud.slice(0, _this.Page_Size)
          _this.Page_Total = _this.crud.length
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.showCrud = this.crud.slice((val - 1) * this.Page_Size, val * this.Page_Size)

    },

    //搜索
    search_do () {
      let select = this.Search_Select
      if (!select) {
        this.warning()
      }
      if (this.Search_Input === '') {
        this.showCrud = this.crud.slice(0, this.Page_Size)
        this.Page_Total = this.crud.length
        this.currentChangePage(this.crud)
        return
      }
//每次手动将数据置空,因为会出现多次点击搜索情况
      this.Shop_Data_End = []
      // eslint-disable-next-line no-unused-vars
      this.crud.forEach((value, index, array) => {
        let temp = ''
        if (select === 'notice_title') {
          temp = value.notice_title
        }
        if (select === 'notice_type') {
          temp = value.notice_type
        }
        if (select === 'notice_author') {
          temp = value.notice_author
        }

        console.log(this.Search_Input)
        if (temp !== '') {
          if (temp.indexOf(this.Search_Input) >= 0) {
            this.Shop_Data_End.push(value)
          }
        }
      })
//页面数据改变重新统计数据数量和当前页
      this.currentPage = 1
      this.Page_Total = this.Shop_Data_End.length
//渲染表格,根据值
      this.currentChangePage(this.Shop_Data_End)
//页面初始化数据需要判断是否检索过
      this.Search_flag = true
    },
    currentChangePage (list) {
      let from = (this.currentPage - 1) * this.Page_Size
      let to = this.currentPage * this.Page_Size
      this.showCrud = []
      for (; from < to; from++) {
        if (list[from]) {
          this.showCrud.push(list[from])
        }
      }
    },
    warning () {
      this.$message({
        message: '请选择搜索标签！',
        type: 'warning'
      })
    },

    //删除公告
    handleDeleteNotice (index, row) {
      let _this = this
      _this.$confirm('此操作将永久删除该公告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post('http://localhost:8080/Move_Public_notice', row)
        _this.$router.go(0)
        _this.$message({
          type: 'success',
          message: '删除成功!',

        })
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

    },

    //修改公告信息
    cancelEdit(){
      this.editDialogFormVisible=false
    },

    handleEditNotice (index, row) {
      this.notice_edit_form = []
      this.notice_edit_form = JSON.parse(JSON.stringify(row))
      this.editDialogFormVisible = true
    },
    // eslint-disable-next-line no-unused-vars
    editHandleNotice (formName, formData) {
      let _this = this
      console.log(_this.$refs[formName])
      _this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('http://localhost:8080/Edit_Public_notice', formData)
            // eslint-disable-next-line no-unused-vars
            .then(function (response) {
              for(let i=0;i<_this.showCrud.length;i++){
                if(_this.showCrud[i].public_notice_id===formData.public_notice_id){
                  _this.showCrud[i] = JSON.parse(JSON.stringify(formData))
                  console.log(11)
                }
              }
              console.log(formData)
            })
            .catch(function (error) {
              console.log(error)
            })
          this.editDialogFormVisible = false

        } else {
          ElMessage.error('请输入正确格式！')
          console.log('error submit!!')
          return false
        }
      })
    },

    //添加公告
    handleAddNotice () {
      this.notice_form = {}
      this.addDialogFormVisible = true
    },
    addHandleNotice (formName, formData) {
      let _this = this
      axios.post('http://localhost:8080/Add_Public_notice', formData)
        .then(function (response) {
          console.log(response)
        })
        .catch(function (error) {
          console.log(error)
        })
      console.log(formData)
      _this.addDialogFormVisible = false
      _this.$router.go(0)

    },

    handleinfo (index, row) {
      this.notice_file_dialogVisible = true
      //console.log(row.notice_id)
      //localStorage.setItem('this_notice_id', row.notice_type)
      this.activity.NoticeID = row.notice_type
      //console.log(row.notice_type)
    },

    handleinfo2 (index, row) {
      this.notice_file_dialogVisible2 = true
      //console.log(row.notice_id)
      //localStorage.setItem('this_notice_id', row.notice_type)
      this.activity.NoticeID = row.notice_type
      //console.log(row.notice_type)
    },

  },

  created () {
    this.findAll()
  },

}
</script>

<style scoped>

</style>
